<template>
  <div>
    <div class="tree_item" v-for="(item, index) in data" :key="index">
      <div class="tree_title_box" :class="item.selected ? 'radio_checked' : ''">
        <div class="tree_title">
          <p class="dep_name" @click.stop="changeIsOpen(item.id)">
            <iconSvg
              name="right"
              w="13px"
              h="13px"
              class="arrow_icon"
              :class="item.isOpen ? 'down' : ''"
              v-if="item.children && item.children.length !== 0"
            ></iconSvg>
            {{ item.departmentName }}
          </p>
          <div
            class="radio_box"
            @click="changeIsSelect(item.id, item.departmentName)"
          >
            <iconSvg
              name="checked"
              w="20px"
              h="20px"
              class="radio_check_icon"
            ></iconSvg>
          </div>
        </div>
      </div>
      <transition name="slide">
        <div
          class="child_item_box"
          v-if="item.children && item.children.length !== 0"
          v-show="item.isOpen"
        >
          <tree-item
            :data="item.children"
            @changeId="change"
            @changeIsOpenAndSelect="changeIsOpenAndSelect"
          ></tree-item>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  name: "tree-item",
  data() {
    return {};
  },
  methods: {
    change(id, departmentName) {
      this.$emit("changeId", id, departmentName);
    },
    changeIsOpenAndSelect(type, id) {
      this.$emit("changeIsOpenAndSelect", type, id);
    },
    changeIsOpen(id) {
      this.$emit("changeIsOpenAndSelect", "isOpen", id);
    },
    changeIsSelect(id, departmentName) {
      this.$emit("changeIsOpenAndSelect", "selected", id);
      this.change(id, departmentName);
    }
  }
};
</script>

<style lang="less">
.tree_item {
  padding-left: 16px;
  text-align-last: left !important;
  .tree_title_box {
    display: flex;
    padding: 8px 0;
    &.radio_checked {
      .tree_title {
        .radio_box {
          &::before {
            background: #456de6;
          }
          .radio_check_icon {
            color: #fff;
          }
        }
      }
    }
    .tree_title {
      flex: 1;
      display: flex;
      .dep_name {
        color: #333;
        flex: 1;
        font-size: 14px;
        text-align: left !important;
        .arrow_icon {
          color: #666666;
          transform: rotate(0deg);
          transition: transform 0.3s ease-in-out;
          transform-origin: 25% 50%;
          &.down {
            transform: rotate(90deg);
            transition: transform 0.3s ease-in-out;
            transform-origin: 25% 50%;
            color: #456de6;
          }
        }
        &.fs15 {
          font-size: 15px;
          .arrow_icon {
            margin-top: -2px;
          }
        }
      }
      .radio_box {
        position: relative;
        width: 20px;
        height: 20px;
        &::before {
          position: absolute;
          display: inline-block;
          content: "";
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border-radius: 50%;
          border: 1px solid #456de6;
          background: transparent;
        }
        .radio_check_icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-55%, -48%);
          color: #456de6;
        }
      }
    }
  }
  .child_item_box {
    overflow: hidden;
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter,
.slide-leave-to {
  transition: all 0.3s ease;
  opacity: 0;
}
</style>
